<template>
  <div style="width:950px;position:relative">
    <el-carousel style="border-radius: 5px;" :interval="5000" arrow="always">
      <el-carousel-item class="pshow" v-for="item in imagesbox" :key="item.id">
        <img :src="item.idView" class="image">
      </el-carousel-item>
    </el-carousel>
    <div class="showbook">
    <el-carousel style="border-radius: 5px;" :interval="5000" arrow="always" height="528px">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="box">
          <div class="item" v-for="v in json.list" :key="v.src">
            <img :src="v.src" alt="">
            <p>{{v.des}}</p>
            <p>{{v.price}}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    </div>
    <div class="rightnew">
      <h4>最新动态</h4>
      <ul>
        <li>
          <a href="">所有教育类书籍折扣半价</a>
        </li>
        <li>
          <a href="">狼图腾热销中，请点击购买</a>
        </li>
        <li>
          <a href="">DD图书馆已进入启动项目</a>
        </li>
      </ul>
    </div>
      <div class="rightrank">
        <el-collapse v-model="activeName" style="border-radius: 5px;" accordion>
          <el-collapse-item title="一致性 Consistency" name="1">
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
          <el-collapse-item title="反馈 Feedback" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="效率 Efficiency" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="可控 Controllability" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imagesbox: [
        {
          id: 0, idView: require('../../assets/img/show0.jpg')
        },
        {
          id: 1, idView: require('../../assets/img/show1.jpg')
        },
        {
          id: 2, idView: require('../../assets/img/show2.jpg')
        },
        {
          id: 3, idView: require('../../assets/img/show3.jpg')
        },
        {
          id: 4, idView: require('../../assets/img/show4.jpg')
        }
      ],
      activeName: '1',
      json: {
        list: [
          {
            src: require('../../assets/img/book1.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book2.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book3.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book4.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book5.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book6.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book7.jpg'),
            des: '这个第一个描述',
            price: '58'
          },
          {
            src: require('../../assets/img/book8.jpg'),
            des: '这个第一个描述',
            price: '58'
          }
        ]
      }
    }
  }
}

</script>

<style scoped>
.box {
  width: 100%;
  margin: 0;
  padding: 80px 0 0;
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(4,1fr);
  background-color: white;
  border-radius: 5px;
}
.box .item {
  width: 100%;
}
.box .item * {
  vertical-align: top;
}
.box img {
  width: 160px;
  height: 150px;
}
.box p {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
}
.rightnew {
  border-radius: 5px;
  width: 270px;
  height: 140px;
  background-color: #ffffff;
  position: absolute;
  right: -290px;
  top: 0;
}
.rightnew li {
  height: 30px;
  line-height: 20px;
  padding: 0;
  vertical-align: top;
}
.rightnew a {
  display: block;
  text-align: left;
  font-family: Verdana;
  font-size: 13px;
  opacity: 0.7;
}
.rightnew h4 {
  height: 30px;
  line-height: 30px;
  padding: 0 4px;
  margin: 8px;
  text-align: left;
  font-family: Tahoma;
  color: #CC0000;
  text-shadow: 5px 5px 5px #CC9900;
}
.rightnew ul {
  padding: 0 0 0 35px;
  margin-top: 0;
}
.rightrank {
  background-color: white;
  border-radius: 5px;
  width: 270px;
  height: 556px;
  position: absolute;
  right: -290px;
  top: 170px;
}

</style>

<style>
.pshow:nth-child(2n) {
  background-color: white;
}

.pshow:nth-child(2n + 1) {
  background-color: white;
}
.el-carousel__container {
  height: 200px;
}
.el-carousel__indicators--horizontal {
  box-sizing: border-box;
}
.el-collapse-item__header {
  padding: 0 5px !important;
}
</style>
